<template>
    <div>
      <div style="margin: 20px 0;text-align: left">
        <span style="font-size: 20px;font-weight: 650">实时概况</span>
        <span style="font-size: 14px;margin-left: 20px;color: rgba(0, 0, 0, 0.447)">更新时间：{{date}} </span>
      </div>

      <div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card style="border-radius: 10%;background-color: #409EFF;text-align: left">
              <p style="color: white;font-size: 14px">用户数</p>
              <h2 style="color: white;font-size: 30px;margin: 0px">{{ totalNum }}</h2>
<!--              <p style="color: white;font-size: 14px">
                较昨日：
                <span class="el-icon-caret-top" v-if="dataNew.userNum - dataOld.userNum>=0">{{((dataNew.userNum - dataOld.userNum )/dataOld.userNum*100).toFixed(2)}}%</span>
                <span class="el-icon-caret-bottom" v-if="dataNew.userNum - dataOld.userNum<0">{{((dataNew.userNum - dataOld.userNum )/dataOld.userNum*100).toFixed(2)}}%</span>
              </p>-->
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card style="border-radius: 10%;background-color: #42b983;text-align: left">
              <p style="color: white;font-size: 14px">付费用户数</p>
              <h2 style="color: white;font-size: 30px;margin: 0px">{{ svipNum }}</h2>
<!--              <p style="color: white;font-size: 14px">
                较昨日：
                <span class="el-icon-caret-top" v-if="dataNew.svipNum - dataOld.svipNum>=0">{{((dataNew.svipNum - dataOld.svipNum )/dataOld.svipNum*100).toFixed(2)}}%</span>
                <span class="el-icon-caret-bottom" v-if="dataNew.svipNum - dataOld.svipNum<0">{{((dataNew.svipNum - dataOld.svipNum )/dataOld.svipNum*100).toFixed(2)}}%</span>
              </p>-->
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card style="border-radius: 10%;background-color: #FFAA00;text-align: left">
              <p style="color: white;font-size: 14px">浏览量</p>
              <h2 style="color: white;font-size: 30px;margin: 0px">{{ views }}</h2>
<!--              <p style="color: white;font-size: 14px">
                较昨日：
                <span class="el-icon-caret-top" v-if="dataNew.watchNum - dataOld.watchNum>=0">{{((dataNew.watchNum - dataOld.watchNum )/dataOld.watchNum*100).toFixed(2)}}%</span>
                <span class="el-icon-caret-bottom" v-if="dataNew.watchNum - dataOld.watchNum<0">{{((dataNew.watchNum - dataOld.watchNum )/dataOld.watchNum*100).toFixed(2)}}%</span>
              </p>-->
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card style="border-radius: 10%;background-color: #0000ff;text-align: left">
              <p style="color: white;font-size: 14px">支付订单数</p>
              <h2 style="color: white;font-size: 30px;margin: 0px">{{ orderNum }}</h2>
<!--              <p style="color: white;font-size: 14px">
                较昨日：
                <span class="el-icon-caret-top" v-if="dataNew.orderNum - dataOld.orderNum>=0">{{((dataNew.orderNum - dataOld.orderNum )/dataOld.orderNum*100).toFixed(2)}}%</span>
                <span class="el-icon-caret-bottom" v-if="dataNew.orderNum - dataOld.orderNum<0">{{((dataNew.orderNum - dataOld.orderNum )/dataOld.orderNum*100).toFixed(2)}}%</span>
              </p>-->
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-card style="margin-top: 30px;border-radius: 2%">

        <p style="text-align: left">支付金额</p>

        <div style="text-align: left;margin-top: 20px">

          <div style="text-align: left;display: inline-block;font-size: 20px">
            <div style="font-size: 12px;color: rgba(60, 60, 67, 0.357)">今日支付金额(元)</div>
            <div style="margin-top: 15px">{{todayPrice.toFixed(2)}}</div>
          </div>

          <div style="text-align: left;display: inline-block;font-size: 20px;margin-left: 40px">
            <div style="font-size: 12px;color: rgba(60, 60, 67, 0.357)">昨日支付金额(元)</div>
            <div style="margin-top: 15px">{{yestodayPrice.toFixed(2)}}</div>
          </div>


        </div>

        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </el-card>

      <div style="margin-top: 20px">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-card >
              <div slot="header" class="clearfix" style="text-align: left">
                <span>销售量TOP5课程</span>
              </div>

              <el-table
                  :data="courseList"
                  style="width: 100%">
                <el-table-column
                    type="index"
                    label="排名">
                </el-table-column>

                <el-table-column
                    prop="coursecover"
                    label="课程图片">
                  <template slot-scope="scope">
                    <img :src="iurl1+scope.row.coursecover" style="height: 50px; width: 50px;border-radius: 50%">
                  </template>
                </el-table-column>

                <el-table-column
                    prop="coursename"
                    label="课程名称">
                </el-table-column>

                <el-table-column
                    prop="saleCounts"
                    label="销售量">
                </el-table-column>
              </el-table>


            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card >
              <div slot="header" class="clearfix" style="text-align: left">
                <span>销售量TOP5实物商品</span>
              </div>

              <el-table
                  :data="commodityList"
                  style="width: 100%">
                <el-table-column
                    type="index"
                    label="排名">
                </el-table-column>
                <el-table-column
                    prop="commoditycover"
                    label="商品图片">
                  <template slot-scope="scope">
                    <img :src="iurl+scope.row.commoditycover" style="height: 50px; width: 50px;border-radius: 50%">
                  </template>
                </el-table-column>

                <el-table-column
                    prop="commodityname"
                    label="商品名称">
                </el-table-column>

                <el-table-column
                    prop="salecounts"
                    label="销售量">
                </el-table-column>
              </el-table>

            </el-card>
          </el-col>

        </el-row>
      </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
              nginxUrl:this.$MyUrl.imgUrl + "equity/",
              iurl: this.$MyUrl.imgUrl+'commodity/',//图片地址 商品
              iurl1: this.$MyUrl.imgUrl+'course/',//图片地址 商品
              commodityList:'',
              courseList:'',
              dataNew:'',
              dataOld:'',
              date:'',
              todayPrice:0,
              yestodayPrice:0,

              myChart: {},
              xData: [], //横坐标
              y1Data: [], //人数数据
              y2Data: [], //人数数据
              myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式


              freeNum:'',
              svipNum:'',
              totalNum:'',

              views:0,
              orderNum:0

            };
        },
        mounted() {
          this.initEcharts();
        },
        methods: {
          initAllOrderNum(){
            let url = "revenue/queryAllOrderNum"
            this.$axios.get(url)
                .then(res=>{

                  if (res.data.code == 101){
                    this.orderNum = res.data.data

                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          initAllViews(){
            let url = "liveDateVo/queryAllViews"
            this.$axios.get(url)
                .then(res=>{

                  if (res.data.code == 101){
                    this.views = res.data.data

                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          initUserTotal(){
            let url = "study/queryTotal"
            this.$axios.get(url)
                .then(res=>{

                  if (res.data.code == 101){
                    this.totalNum = res.data.data
                    this.freeNum = this.totalNum - this.svipNum

                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          initUserSvip(){
            let url = "study/querySvip"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code == 101){
                    this.svipNum = res.data.data
                    this.freeNum = this.totalNum - this.svipNum
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }


                })
          },

          initCourse(){
            let url = "data/queryCourseTop"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code==101){
                    this.courseList = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          initCommodity(){
            let url = "data/queryCommodityTop"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code==101){
                    this.commodityList = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          initDataNew(){
            let url = "data/queryNew"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code==101){
                    this.dataNew = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          initDataOld(){
            let url = "data/queryOld"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code==101){
                    this.dataOld = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          getTime(){
            let y = new Date().getFullYear()
            let m = new Date().getMonth()+1
            let d = new Date().getDate()
            let h = new Date().getHours()
            let mi = new Date().getMinutes()
            let s = new Date().getSeconds()
            this.date = y+"-"+m+"-"+d+" "+h+":"+mi+":"+s

          },
          initTodayRecord(){
            let y = new Date().getFullYear()
            let m = new Date().getMonth()+1
            let d = new Date().getDate()
            let d2 = new Date().getDate()+1
            let today = y+"-"+m+"-"+d
            let tomorow=y+"-"+m+"-"+d2
            let url = "revenue/queryToday"
            this.$axios.get(url,{
              params:{
                today:today,
                tomorow:tomorow
              }
            }).then(res=>{
              if (res.data.code==200){
                console.log(res.data.data)
                for (let r of res.data.data ){
                  this.todayPrice += r.amountNum
                  this.y1Data.push(r.amountNum)
                }
                this.initEcharts()
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }

            })
          },
          initYestodayRecord(){
            let y = new Date().getFullYear()
            let m = new Date().getMonth()+1
            let d = new Date().getDate()-1
            let d2 = new Date().getDate()
            let today = y+"-"+m+"-"+d
            let tomorow=y+"-"+m+"-"+d2
            let url = "revenue/queryToday"
            this.$axios.get(url,{
              params:{
                today:today,
                tomorow:tomorow
              }
            }).then(res=>{
              if (res.data.code==200){
                console.log(res.data.data)
                for (let r of res.data.data ){
                  this.yestodayPrice += r.amountNum
                  this.xData.push(r.insertTime.substring(11,16))
                  this.y2Data.push(r.amountNum)
                }
                this.initEcharts()
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }

            })
          },
          initEcharts() {
            const option = {
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xData
              },
              yAxis: {},
              color:["orange","blue"],
              legend:{
                data:[{name:"今日", icon: "circle"}, {name:"昨日", icon: "circle"}],
                bottom:"0%"
              },
              series: [
                {
                  name:"今日",
                  data: this.y1Data,
                  type: "line" ,// 类型设置为折线图,
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      color: 'orange',
                      width: 4,

                    }
                  }
                },
                {
                  name:"昨日",
                  data: this.y2Data,
                  type: "line" ,// 类型设置为折线图
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      color: 'blue',
                      width: 4,

                    }
                  }
                }
              ]
            };
            this.myChart = this.$echarts.init(document.getElementById("mychart"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.myChart.resize();
            });
          },

          reload(){
            this.getTime();
            this.initDataNew();
            this.initDataOld();
            this.initCourse();
            this.initCommodity();
            this.initTodayRecord();
            this.initYestodayRecord();
            this.initUserSvip();
            this.initUserTotal();
            this.initAllViews();
            this.initAllOrderNum()
          }


        },
        created() {
          this.reload()
        }
    };
</script>
<style lang="less" scoped>

</style>